<template>
  <view class="">
    <view class="">
      <echarts :options="chartOptions" :canvas-id="canvasId" ref="canvas" />
    </view>
    <view class="padding">
      <view class="count-infos-list">
        <view class="count-info-item count-info-item1">
          <view class="point"></view>
          <p class="flex1">可用余额</p>
          <view class="right"><text>￥</text><text class="b">{{ getUserInfo.availableBalance }}</text></view>
        </view>
        <view class="count-info-item count-info-item2">
          <view class="point"></view>
          <p class="flex1">余额宝</p>
          <view class="right"><text>￥</text><text class="b">{{ getUserInfo.balanceBao }}</text></view>
        </view>
        <view class="count-info-item count-info-item3">
          <view class="point"></view>
          <p class="flex1">已赚收益</p>
          <view class="right"><text>￥</text><text class="b">{{ getUserInfo.totalEarnings }}</text></view>
        </view>
        <view class="count-info-item count-info-item4">
          <view class="point"></view>
          <p class="flex1">充值金额</p>
          <view class="right"><text>￥</text><text class="b">{{ getUserInfo.totalRecharge }}</text></view>
        </view>
        <view class="count-info-item count-info-item5">
          <view class="point"></view>
          <p class="flex1">提现金额</p>
          <view class="right"><text>￥</text><text class="b">{{ getUserInfo.totalWithdraw }}</text></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';
import * as echarts from '@/static/echarts.min.js';

export default {
  data() {
    return {
      canvasId: 'myChart',
    };
  },
  computed: {
    ...mapGetters(['getUserInfo']),
    chartOptions() {
      return {
        series: [{
          type: 'pie',
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '30',
              fontWeight: 'bold',
            },
          },
          labelLine: {
            show: false,
          },
          data: this.getPieChartData(),
        }],
      };
    },
  },
  methods: {
    getPieChartData() {
      return [
        { value: this.getUserInfo.totalWithdraw , name: ' 已赚取金额 1' },
        { value: this.getUserInfo.totalEarnings, name: '提现金额2' },
        { value: this.getUserInfo.totalRecharge, name: '充值金额 3' },
        { value: this.getUserInfo.availableBalance, name: '可用余额 4' },
        { value:this.getUserInfo.balanceBao, name: '余额宝 5' },
      ];
    },
    drawChart() {
      const chart = echarts.init(this.$refs.canvas, null, {
        width: uni.upx2px(750),
        height: uni.upx2px(400),
      });
      chart.setOption(this.chartOptions);
    },
  },
  onReady() {
    this.drawChart();
  },
};
</script>

<style>
	/* 样式可以根据需要自行调整 */
	.padding {
		padding: 20px;
	}

	.count-infos-list {
		/* 样式可以根据需要自行调整 */
	}

	.count-info-item {
		display: flex;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid #ddd;
	}

	.point {
		/* 样式可以根据需要自行调整 */
		width: 10px;
		height: 10px;
		background-color: red;
		border-radius: 50%;
		margin-right: 10px;
	}

	.flex1 {
		flex: 1;
		/* 样式可以根据需要自行调整 */
	}

	.right {
		/* 样式可以根据需要自行调整 */
	}

	.b {
		font-weight: bold;
		/* 样式可以根据需要自行调整 */
	}
</style>